<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过度案例_原生实现</title>
		<style>
			.picture{
				width: 100px;
				transition: 1s all linear;
			}
			.come{
				opacity: 1;
				transform: scale(1) rotate(0deg) ;
			}
			.leave{
				opacity: 0;
				transform: scale(0.2) rotate(180deg) ;
			}
		</style>
	</head>
	<body>
		<button id="btn">切换</button> <br/>
		<img class="picture" src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" >
	</body>

	<script type="text/javascript" >
		const btn = document.getElementById('btn')
		const img = document.querySelector('.picture')
		let isShow = true

		btn.onclick = ()=>{
			if(isShow) img.className = 'picture leave'
			else img.className = 'picture come'
			isShow = !isShow
		}
	</script>
</html>